<template>
  <div>
    <scroll class="left" :pullUpLoad="isPullUpLoad" :probeType="probeType">
      <cartegory-title :categories="categories" @getcurrentIndex="selectItem"/>
    </scroll>

    <scroll class="right" :pullUpLoad="isPullUpLoad" :probeType="probeType">
    <goods-list         
        :goods="result"
        :list="4"
        name="recommendList"
        class=""
        />
    </scroll>
  </div>
</template>

<script>
import {
  getCategory,
  getSubcategory,
  getCategoryDetail,
} from "network/category";
import { NEW, POP, SELL } from "@/common/const";
import Scroll from "common/scroll/Scroll";
import CartegoryTitle from "./children/CartegoryTitle";
import GoodsList from "content/goods/GoodsList"
export default {
  name: "Category",
  components: { Scroll, CartegoryTitle,GoodsList,},
  data() {
    return {
      categories: [],
      categoryData: {},
      currentIndex: -1,
      isPullUpLoad: true,
      probeType: 2,
      result:[]
    };
  },
  created() {
    this.getCategory();
  },
  mounted() {},
  methods: {
    getCategory() {
      getCategory().then((res) => {
        // 1.获取分类数据
        this.categories = res.data.category.list;
        // 2.初始化每个类别的子数据
        for (let i = 0; i < this.categories.length; i++) {
          this.categoryData[i] = {
            subcategories: {},
            categoryDetail: {
              pop: [],
              new: [],
              sell: [],
            },
          };
        }
        // 3.请求第一个分类的数据
        this._getSubcategories(0);
      });
    },
    _getSubcategories(index) {
      this.currentIndex = index;
      const mailKey = this.categories[index].maitKey;
      getSubcategory(mailKey).then((res) => {
        this.categoryData[index].subcategories = res.data;
        this.categoryData = { ...this.categoryData };
        this.getCategoryDetail(POP);
        this.getCategoryDetail(SELL);
        this.getCategoryDetail(NEW);
        this.result = this.categoryData[index].subcategories.list
        console.log(this.result);
      });
    },
    getCategoryDetail(type) {
      // 1.获取请求的miniWallkey
      const miniWallkey = this.categories[this.currentIndex].miniWallkey;
      // 2.发送请求,传入miniWallkey和type
      getCategoryDetail(miniWallkey, type).then((res) => {
        // 3.将获取的数据保存下来
        this.categoryData[this.currentIndex].categoryDetail[type] = res;
        this.categoryData = { ...this.categoryData };
      });
    },
    /**
     * 事件响应相关的方法
     */
    selectItem(index) {
      this._getSubcategories(index);
    },
  },
};
</script>

<style lang="css" scoped>
.left {
  width: 20vw;
  height: calc(100vh - 49px);
  background-color: #f6f6f6;
  overflow: hidden;
}
.right{
  width: 80vw;
  height: calc(100vh - 49px);
  overflow: hidden;
}

</style>